<template>
    <ModalCom v-model:open="state.visible" v-if="state.visible" class="cropper-dialog screen-dialog" append-to-body title="裁剪图片"
      :close-on-click-modal="false" :footer="false" :close-on-press-escape="false" destroy-on-close>
      <div class="cropper-wrapper">
        <vue-cropper ref="cropper" :img="state.img" :output-size="state.options.outputSize"
          :output-type="state.options.outputType" :info="state.options.info" :can-scale="state.options.canScale"
          :auto-crop="state.options.autoCrop" :auto-crop-width="state.options.autoCropWidth"
          :auto-crop-height="state.options.autoCropHeight" :fixed="state.options.fixed"
          :fixed-number="state.options.fixedNumber" :full="state.options.full" :fixed-box="state.options.fixedBox"
          :can-move="state.options.canMove" :can-move-box="state.options.canMoveBox" :original="state.options.original"
          :center-box="state.options.centerBox" :height="state.options.height" :info-true="state.options.infoTrue"
          :max-img-size="state.options.maxImgSize" :enlarge="state.options.enlarge"
          :mode="state.options.mode"></vue-cropper>
      </div>
      <div class="margin-top-20 text-right">
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleOk">确定上传</a-button>
        </a-space>
      </div>
    </ModalCom>
  </template>
  
  <script setup>
  import { VueCropper } from "vue-cropper"
  import { reactive, ref } from "vue"
  import "vue-cropper/dist/index.css"
  import ModalCom from "@/components/modal/index.vue"
  const props = defineProps({
    cropWidth: {
      type: String,
      default: "120px",
    },
    cropHeight: {
      type: String,
      default: "120px",
    },
    scale: {
      type: Array,
      default: () => [1, 1.3],
    },
  })
  const cropper = ref(null)
  const state = reactive({
    visible: false,
    confirmLoading: false,
    // vue-cropper相关配置 详细的可以去github上看文档
    img: null, //要裁剪的图像资源 可选项: url地址 || base64 || blob
    options: {
      outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
      outputType: "png", // 裁剪生成图片的格式（jpeg || png || webp）
      info: true, // 图片大小信息
      canScale: true, // 图片是否允许滚轮缩放
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: props.cropWidth, // 默认生成截图框宽度
      autoCropHeight: props.cropHeight, // 默认生成截图框高度
      fixed: true, // 是否开启截图框宽高固定比例
      fixedNumber: props.scale, // 截图框的宽高比例
      full: false, // false按原比例裁切图片，不失真
      fixedBox: false, // 固定截图框大小，不允许改变
      canMove: true, // 上传图片是否可以移动
      canMoveBox: true, // 截图框能否拖动
      original: false, // 上传图片按照原始比例渲染
      centerBox: true, // 截图框是否被限制在图片里面
      height: true, // 是否按照设备的dpr 输出等比例图片
      infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
      maxImgSize: 3000, // 限制图片最大宽度和高度
      enlarge: 5, // 图片根据截图框输出比例倍数
      mode: "contain", // 图片默认渲染方式
    },
  })
  
  const emit = defineEmits(["ok"])
  // 调用此方法需传入一个 [url地址 || base64 || blob]
  // 父组件调用: this.$refs['cropperModal'].edit(参数)
  const edit = (image) => {
    state.img = image
    state.visible = true
  }
  // 监听对话框的OK/Cancel按钮的点击事件
  const handleOk = () => {
    state.confirmLoading = true
    // 获取截图的base64 数据
    // getCropBlob获取二进制数据
    cropper.value.getCropData((data) => {
      //将裁剪侯后的图片对象射给**父组件**,然后关闭对话框
      emit("ok", data)
      handleCancel()
    })
  }
  const handleCancel = (e) => {
    state.visible = false
  }
  defineExpose({ edit })
  </script>
  
  <style lang="scss" scoped>
  .cropper-wrapper {
    width: 100%;
    height: 400px;
  }
  </style>
  